﻿
@{
    ViewBag.Title = "ShortCodes";
    Layout = "~/Areas/Mobile/Views/Shared/_Index_Layout.cshtml";
}
<script src="~/Areas/Mobile/Content/js/jquery.easy-pie-chart.js"></script>
<script>
			$(function(){
				$('.chart.green').easyPieChart({
					animate: 1500,
					scaleColor: false,
					lineWidth : 3,
					trackColor : "#efefef",
					barColor : "#93af53",
					size : 85
				});

				$('.chart.orange').easyPieChart({
					animate: 1500,
					scaleColor: false,
					lineWidth : 3,
					trackColor : "#efefef",
					barColor : "#dfa654",
					size : 85
				});

				$('.chart.red').easyPieChart({
					animate: 1500,
					scaleColor: false,
					lineWidth : 3,
					trackColor : "#efefef",
					barColor : "#ff756f",
					size : 85
				});
			});
</script>

<div id="header">
    <a href="#menu"></a>
    <span id="Logo" class="svg">
        Help Document
    </span>
    <a class="backBtn" href="javascript:history.back();"></a>
</div>
<div id="content">

    <h3 class="title">Charts</h3>
    <span class="chart green" data-percent="86">
        <span class="percent">86</span>
        <h3>HTML</h3>
    </span>
    <span class="chart orange" data-percent="56">
        <span class="percent">56</span>
        <h3>CSS</h3>
    </span>
    <span class="chart red" data-percent="36">
        <span class="percent">36</span>
        <h3>jQuery</h3>
    </span>

    <hr>
    <h3 class="title">Buttons</h3>

    <a href="#" class="o-buttons blue">Button</a>
    <a href="#" class="o-buttons red">Button</a>
    <a href="#" class="o-buttons green">Button</a>
    <a href="#" class="o-buttons orange">Button</a>

    <h4 class="title">Big buttons</h4>
    <a href="#" class="o-buttons b-big blue">Button</a>
    <a href="#" class="o-buttons b-big red">Button</a>
    <a href="#" class="o-buttons b-big green">Button</a>
    <a href="#" class="o-buttons b-big orange">Button</a>

    <hr>
    <h3 class="title">Notifications</h3>
    <div class="notifications success">
        Success - your request was successful
        <i></i>
    </div>
    <div class="notifications error">
        Error - your request was unsuccessful
        <i></i>
    </div>
    <div class="notifications warning">
        Warning - there is no turn back
        <i></i>
    </div>
    <div class="notifications info">
        Info - Information
        <i></i>
    </div>
    <hr>

    <h1>
        H1 - Header one</h1>
        <h2>
            H2 - Header two</h2>
            <h3>
                H3 - Header three</h3>
                <h4>
                    H4 - Header four</h4>
                    <h5>
                        H5 - Header five</h5>
                        <h6>H6 - Header six</h6>
                        <p>P - Paragraph</p>

                        <hr>

                        <h3 class="title">Columns</h3>
                        <div class="columns twelve">
                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
                        </div>
                        <hr>
                        <div class="row">
                            <div class="mobile-two">
                                <h4 class="title">1/2</h4>
                                Lorem Ipsum has been the standard dummy text.
                            </div>
                            <div class="mobile-two">
                                <h4 class="title">1/2</h4>
                                Lorem Ipsum has been the standard dummy text.
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="mobile-three">
                                <h4 class="title">3/4</h4>
                                Lorem Ipsum has been the industry's standard dummy text.
                            </div>
                            <div class="mobile-one">
                                <h4 class="title">1/4</h4>
                                Dummy text.
                            </div>
                        </div>

                        <hr>
                        <h3 class="title">Social icons</h3>



</div>

<nav id="menu">
    <ul>
        <li>
            <a href="index.html">
                <i class="i-home i-small"></i>Home
            </a>
        </li>
        <li>
            <a href="about.html">
                <i class="i-about i-small"></i>About
            </a>
        </li>
        <li>
            <a href="blog.html">
                <i class="i-blog i-small"></i>Blog
            </a>
            <ul>
                <li><a href="blog-single-post.html">First Post</a></li>
                <li>
                    <a href="blog-single-post.html">Second Post</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="gallery.html">
                <i class="i-gallery i-small"></i>Gallery
            </a>
        </li>
        <li class="Selected">
            <a href="shortcodes.html">
                <i class="i-shortcodes i-small"></i>Shortcodes
            </a>
        </li>
        <li>
            <a href="contact.html">
                <i class="i-contact i-small"></i>Contact
            </a>
        </li>
    </ul>
</nav>